<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>HellWord444444</h2>
    <div @click="onChange">改变message</div>
    <input id="hook-arguments-example" v-format:sex="message"/>
    <br>
    <!-- 姓名:<input checkParam='{"requiredMsg":"姓名不能为空"}' type="text"/> -->
    姓名:<input value="ff" v-checkParam="{requiredMsg:'姓名不能为空'}" type="text"/>
    <br>
    ip:<input value="10.0.0.1" v-checkParam="{requiredMsg:'ip地址不能为空!',regex:/((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))/,regexMsg:'ip地址格式有误'}"/>
    <br>
    手机号码:<input  value="17505915520"  v-checkParam="{requiredMsg:'手机号码不能为空!',regex:'phone',regexMsg:'手机号码格式错误!'}"/>
    <br>
    email:<input  value="cnluowei@126.com" v-checkParam="{requiredMsg:'邮箱不能为空!',regex:'email',regexMsg:'邮箱格式错误!'}"/>
    <br>
    身份证:<input value="35072219931028121X" v-checkParam="{requiredMsg:'身份证不能为空!',regex:'idcard',regexMsg:'身份证格式错误!'}"/>
    min-max:<input  v-checkParam="{requiredMsg:'值不能为空!',minMax:'-1~',minMaxMsg:'最小值-1'}"/>
    <button v-checkSubmit>提交</button>
    <!-- <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul> -->
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      message: 0
    }
  },
  methods:{
    onChange(){
      this.message = 1
      console.log("=====onChange======")
    },
    submit(){
      console.log("提交")
    }
  },
  /*  directives: {
      twoWay: true,
      format: {
        // 指令的定义
        inserted: function (el) {
          console.log("========inserted========")
          //el.focus()
        },
        bind:function(el,binding){
          console.log(this)
          console.log("========bind========"+binding.value)
          console.log("arg===>"+binding.arg);
          el.value = "bind==>"+(binding.value == 0?'女':'男');
        //   this.handler = function () {
        //     this.set(this.el.value)
        //   }.bind(this)
        // this.el.addEventListener('input', this.handler)
        },
        update:function(el, binding){  //更新时
          console.log("=======update========")
          el.value = "update==>"+binding.value;
          el.value = "bind==>"+(binding.value == 0?'女':'男');
        },
          // 所在组件的 VNode 及其孩子的 VNode 全部更新时调用。
        componentUpdated(){
          console.log( 'componentUpdated' );
        },
        // 只调用一次，指令与元素解绑时调用。
        unbind(){
          console.log( 'unbind' );
         // this.el.removeEventListener('input', this.handler)
        }
      }
  },*/
  watch:{
    message(){
      console.log("=====message=======")
      //this.message = "abc"
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
